<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="../../static/component/pear/css/pear.css" rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>
	</head>
	<body class="pear-container">
		<input type="hidden" th:value="${rid}" name="rid" id="rid">
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="power-table" lay-filter="power-table"></table>
			</div>
		</div>
		
		<script type="text/html" id="power-toolbar">
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="changepowersByrid">
				<i class="layui-icon layui-icon-delete"></i>
				添加菜单
			</button>
			<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
				<i class="layui-icon layui-icon-spread-left"></i>
				展开
			</button>
			<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
				<i class="layui-icon layui-icon-shrink-right"></i>
				折叠
			</button>
			<button class="pear-btn pear-btn-success pear-btn-md" lay-event="refresh">
				<i class="layui-icon layui-icon-refresh"></i>
			</button>
		</script>


		<script type="text/html" id="power-enable">

			{{#if (d.is_off == 1) { }}
			<button class="pear-btn pear-btn-danger pear-btn-sm">封禁</button>
			{{# }else if(d.is_off == 0){ }}
			<button class="pear-btn pear-btn-success pear-btn-sm">正常</button>
			{{# } }}
		</script>

		<script src="../../static/component/layui/layui.js" th:src="@{/static/component/layui/layui.js}"></script>
		<script src="../../static/component/pear/pear.js" th:src="@{/static/component/pear/pear.js}"></script>
		<script>
		    layui.use(['table','form','jquery','treetable'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
		        let treetable = layui.treetable;

		        let MODULE_PATH = "operate/";

				let render = function(){
					treetable.render({
						treeColIndex: 1,
						treeSpid: 0,
						treeIdName: 'parent_id',
						treePidName: 'parent_id',
						skin:'line',
						treeDefaultClose: true,
						toolbar:'#power-toolbar',
						elem: '#power-table',
						url: '/system/power/powerList',
						page: false,
						cols: [
							[
								{type: 'checkbox'},
								{field: 'title', minWidth: 200, title: '权限名称'},
								{field: 'icon', title: '图标',templet:'#icon'},
								{field: 'type', title: '权限类型',templet:'#power-type'},
								{field: 'power_code', title: '权限标识', width: 150},
								{field: 'enable', title: '是否可用',templet:'#power-enable'},
								{field: 'sort', title: '排序'}
							]
						], done: function (res, curr, count) {
							$.ajax({
									type:'post',
									url:"/system/power/getPermissionbyRid",
									dataType:'json',
									data:JSON.stringify({"rid":$('input[name="rid"]').val()}),
									contentType:'application/json',
									success:function (data) {
										let ids = data.data
										if (ids!==null){
											for(let i = 0;i<ids.length;i++){
												var index;
												for(let j = 0;j<res.data.length;j++){
													if (res.data[j]['id'] === ids[i]){
														// console.log("id为："+ids[i])
														// console.log("ids为："+res.data[j]['id'])
														index = j;
														// console.log("index值为"+index)
														break;
													}
												}
												res.data[index]["LAY_CHECKED"]='true';
												//下面三句是通过更改css来实现选中的效果
												var indexs= res.data[index]['LAY_TABLE_INDEX'];

												$('tr[data-index=' + indexs + '] input[type="checkbox"]').prop('checked', true);
												$('tr[data-index=' + indexs + '] input[type="checkbox"]').next().addClass('layui-form-checked');
											}
										}

									},
									error:function () {
										layer.tips("网络错误")
									}
								});
						}
					});
				}

				render();
		
		        table.on('tool(power-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            } else if(obj.event === 'power'){
		                window.power(obj);
		            }
		        });

		        table.on('toolbar(power-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            } else if(obj.event === 'refresh'){
						render();
		                // window.refresh();
		            } else if(obj.event === 'changepowersByrid'){
		                window.changepowersByrid(obj);
		            } else if(obj.event === 'expandAll'){
						treetable.expandAll("#power-table");
					} else if(obj.event === 'foldAll'){
						treetable.foldAll("#power-table");
					}else if(obj.event === 'reload'){
						treetable.reload('power-table');
					}
		        });
		
		        form.on('submit(power-query)', function(data){
		            table.reload('power-table',{where:data.field})
		            return false;
		        });
		

		        window.changepowersByrid = function(obj){
		            let data = table.checkStatus(obj.config.id).data;
		            if(data.length === 0){
		                layer.msg("未选中数据",{icon:3,time:1000});
		                return false;
		            }
		            let ids = "";
		            for(let i = 0;i<data.length;i++){
		                ids += data[i].id+",";
		            }
		            ids = ids.substr(0,ids.length-1);
		            layer.confirm('确定要修改这些菜单权限吗？', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                let loading = layer.load();
		                $.ajax({
							url: "/system/power/changepowersByrid",
							dataType: 'json',
							type: 'post',
							data:JSON.stringify({"id":ids,"rid":$("#rid").val()}),
							contentType:'application/json',
		                    success:function(result){
		                        layer.close(loading);
		                        if(result.code ===0){
		                            layer.msg(result.msg,{icon:1,time:1000},function(){
										treetable.reload('power-table');
		                            });
		                        }else{
		                            layer.msg(result.msg,{icon:2,time:1000});
		                        }
		                    }
		                })
		            });
		        }
		    })
		</script>
	</body>
</html>
